<template>
    <AutoPage @getScale="getScale" title="审执质效赛道">
        <div class="content-box">
            <div class="grid-col-3">
                <div>
                    <Card title="新收案件类型">
                        <CaseType />
                    </Card>
                </div>
                <div>
                    <Card title="各部门收结案">
                        <DepartmentCase />
                    </Card>
                </div>
                <div>
                    <Card title="团队达标率（111个团队）">
                        <TeamPass />
                    </Card>
                </div>
            </div>
            <div class="grid-col-flex">
                <div>
                    <CenterNodule />
                </div>
                <div>
                    <Card title="院标考核指标">
                        <AssessmentIndicators />
                    </Card>
                </div>
            </div>
            <div class="grid-col-3">
                <div>
                    <Card title="案件阅核">
                        <CaseRead />
                    </Card>
                </div>
                <div>
                    <Card title="司法公开">
                        <JudicialOpenness />
                    </Card>
                </div>
                <div>
                    <Card title="关注指标">
                        <FocusIndicators />
                    </Card>
                </div>
            </div>
        </div>
    </AutoPage>
</template>

<script>
import Card from '@/components/Card.vue'
import AutoPage from "@/components/AutoPage.vue";
import CaseType from './charts/case-types.vue'
import DepartmentCase from './charts/department-case.vue'
import TeamPass from './charts/team-pass.vue'
import CenterNodule from './charts/center-module.vue'
import CaseRead from './charts/case-read.vue'
import JudicialOpenness from './charts/judicial-openness.vue'
import FocusIndicators from './charts/focus-indicators.vue'
import AssessmentIndicators from './charts/assessment-indicators.vue'


export default {
    name: 'QualityEfficiency',
    components: {
        Card, AutoPage, CaseType, DepartmentCase, TeamPass, CenterNodule, CaseRead, JudicialOpenness, FocusIndicators, AssessmentIndicators
    },
    data() {
        return {
            scale: 1
        }
    },
    methods: {
        getScale(e) {
            this.scale = e;
        },
    }
}
</script>

<style lang="less" scoped>
.content-box {
    flex: 1;
    width: 100%;
    padding: 0 35px 38px;
    display: flex;
    margin: 46px 0 0;

    .grid-col-3 {
        display: flex;
        flex-direction: column;
        width: 520px;

        &>div {
            flex: 1;

            &:nth-child(2) {
                margin: 20px 0;
            }
        }
    }

    .grid-col-flex {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin: 0 20px;

        &>div:first-child {
            margin: 0 0 20px;
            box-sizing: content-box;
            height: 290px;
        }

        &>div:last-child {
            flex: 1;
        }
    }
}
</style>